import React from 'react';
import { Button, Form, Input, Space, message } from 'antd';
import { UserListInfo } from "../../types";
import dayjs from "dayjs";

interface EditUserFormProps {
  form: any;
  editingId: number | null;
  users: UserListInfo[];
  setUsers: React.Dispatch<React.SetStateAction<UserListInfo[]>>;
  setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
  onUserUpdate: (updatedUser: UserListInfo) => void; // 添加回调函数
}

const EditUserForm: React.FC<EditUserFormProps> = ({ form, editingId, users, setUsers, setIsModalVisible, onUserUpdate }) => {
  const currentUser = users.find(user => user.id === editingId) || {} as UserListInfo;

  const handleFinish = async (values: any) => {
    const updatedUser = {
      ...currentUser,
      ...values,
      birthDay: values.birthDay ? dayjs(values.birthDay).format('YYYY-MM-DD') : undefined,
    };

    setUsers(prevUsers => prevUsers.map(user => user.id === updatedUser.id ? updatedUser : user));
    setIsModalVisible(false);
    onUserUpdate(updatedUser); // 调用回调函数

  };

  return (
    <Form form={form} layout="vertical" initialValues={{
      nickName: currentUser.nickName || '',
      mobile: currentUser.mobile || '',
      gender: currentUser.gender || 'male',
      birthDay: currentUser.birthDay ? dayjs(new Date(currentUser.birthDay)).format('YYYY-MM-DD') : undefined,
      role: currentUser.role,
      is_deleted: currentUser.is_deleted,
      id: currentUser.id
    }} onFinish={handleFinish}>
      <Form.Item
        name="nickName"
        label="昵称"
        rules={[{ required: true, message: '请输入昵称' }]}
      >
        <Input placeholder="请输入昵称" />
      </Form.Item>
      <Form.Item
        name="mobile"
        label="手机号"
        rules={[
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
        ]}
      >
        <Input placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="gender"
        label="性别"
        rules={[{ required: true, message: '请选择性别' }]}
      >
        <Space.Compact>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={getFieldValue('gender') === 'male' ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ gender: 'male' })}
              >
                男性
              </Button>
            )}
          </Form.Item>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={getFieldValue('gender') === 'female' ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ gender: 'female' })}
              >
                女性
              </Button>
            )}
          </Form.Item>
        </Space.Compact>
      </Form.Item>
      <Form.Item
        name="birthDay"
        label="生日"
      >
        <Input type="date" />
      </Form.Item>
      <Form.Item
        name="role"
        label="角色"
      >
        <Space.Compact>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={getFieldValue('role') === 1 ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ role: 1 })}
              >
                普通用户
              </Button>
            )}
          </Form.Item>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={getFieldValue('role') === 2 ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ role: 2 })}
              >
                管理员
              </Button>
            )}
          </Form.Item>
        </Space.Compact>
      </Form.Item>
      <Form.Item
        name="is_deleted"
        label="状态"
        valuePropName="checked"
      >
        <Space.Compact>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={!getFieldValue('is_deleted') ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ is_deleted: false })}
              >
                活跃
              </Button>
            )}
          </Form.Item>
          <Form.Item noStyle shouldUpdate>
            {({ getFieldValue }) => (
              <Button
                type={getFieldValue('is_deleted') ? 'primary' : 'default'}
                onClick={() => form.setFieldsValue({ is_deleted: true })}
              >
                停用
              </Button>
            )}
          </Form.Item>
        </Space.Compact>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </Form>
  );
};

export default EditUserForm;